<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>

</body>
<script type="importmap">
    {
        "imports": {
            "three": "./build/three.module.js",
            "three/addons/": "./examples/jsm/"
        }
    }
</script>
<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import Stats from 'three/addons/libs/stats.module.js';
    import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

    const width = window.innerWidth;
    const height = window.innerHeight;

    // 创建三维场景
    const scene = new THREE.Scene()

    // 添加辅助坐标轴
    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper)

    // 创建三维中的物体
    const geometry = new THREE.BoxGeometry(100,100,100)
    const material = new THREE.MeshPhongMaterial({
        color: 0x00ffff, //设置材质颜色
        transparent: true,//开启透明
        opacity: 0.5,//设置透明度
    })
    const mesh = new THREE.Mesh(geometry,material)
    mesh.position.set(0,0,0)
    scene.add(mesh);

    // 创建相机 拍摄物体
    const camera = new THREE.PerspectiveCamera(30,width / height,1,3000)
    camera.position.set(200,300,500)
    camera.lookAt(0,0,0)

    // 平行光
    // const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // directionalLight.position.set(100, 100, 100);

    // scene.add(directionalLight);

    // 环境光
    const ambient = new THREE.AmbientLight(0xffffff,0.4);
    ambient.position.set(100,100,100);
    scene.add(ambient);

    const helper = new THREE.PointLightHelper(ambient,5);
    scene.add(helper);

    // 创建渲染器 呈现相机拍摄的场景
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(width,height);
    renderer.render(scene,camera);

    const controls = new OrbitControls(camera,renderer.domElement);
    // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
    controls.addEventListener('change',function () {
        renderer.render(scene,camera); //执行渲染操作
    });//监听鼠标、键盘事件


    const obj = {
        color: 0x00ffff,
        scale: 0,
        bool: false,
        specular: 0x00ffff,
    };

    // Gui 控件创建
    const gui = new GUI()

    gui.domElement.style.right = "0px"
    gui.domElement.style.width = "300px"


    // gui界面上增加交互界面，改变obj对应属性
    // 格式：.add(控制对象，对象具体属性，其他参数)
    gui.add(mesh.position,'x',0,180).name("X轴移动").step(10);
    gui.add(mesh.position,'y',0,180).name("Y轴移动").onChange(() => { console.log("当y轴移动时触发") });
    gui.add(mesh.position,'z',0,180).name("Z轴移动");
    gui.add(ambient,'intensity',0,2).name("亮度");

    // .addColor()生成颜色值改变的交互界面
    gui.addColor(obj,'color',).onChange((value) => {
        mesh.material.color.set(value)
    });

    // 参数3数据类型：数组(下拉菜单)
    gui.add(obj,'scale',[-100,0,100]).name('y坐标').onChange(function (value) {
        mesh.position.y = value;
    });

    // 参数3数据类型：对象(下拉菜单)
    gui.add(obj,'scale',{
        left: -100,
        center: 0,
        right: 100
        // 左: -100,  // 可以用中文
        // 中: 0,
        // 右: 100
    }).name('位置选择').onChange(function (value) {
        mesh.position.x = value;
    });

    // 单元
    gui.add(obj,'bool').name('是否旋转').onChange(function (value) {
        // 点击单选框，控制台打印obj.bool变化
        console.log('obj.bool',value);
    });

    // 创建材质子菜单
    const matFolder = gui.addFolder('材质');
    matFolder.close();//关闭菜单

    // 材质颜色color
    matFolder.addColor(obj,'color').onChange(function (value) {
        material.color.set(value);
    });

    // 材质高光颜色specular
    matFolder.addColor(obj,'specular').onChange(function (value) {
        material.specular.set(value);
    });

    const dirFolder2 = matFolder.addFolder('套哇');


    // 渲染循环
    function render() {
        renderer.render(scene,camera);
        if (obj.bool) mesh.rotateY(0.01);
        requestAnimationFrame(render);
    }
    render();

    // 将渲染物体添加到 指代功能的元素中
    document.body.appendChild(renderer.domElement);

</script>

</html>